<!DOCTYPE html>
<html>
<head>
    <title>Lens Combination Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Configuration ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round'; // Creates slightly softer, thicker lines similar to the original drawing

        // --- Geometric Parameters ---
        const centerX = canvas.width / 2;
        const centerY = 150;
        const lensSeparation = 220;
        const lensHeight = 160;

        const x1 = centerX - lensSeparation / 2; // X-position of Lens L1
        const x2 = centerX + lensSeparation / 2; // X-position of Lens L2
        const lensTop = centerY - lensHeight / 2;
        const lensBottom = centerY + lensHeight / 2;

        const dimLineY = 240; // Y-position for the dimension line
        const captionY = 320;
        const arrowheadSize = 10;

        // --- Helper Function for Drawing Arrows ---
        function drawArrow(context, fromX, fromY, toX, toY, size) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            context.save();
            context.translate(toX, toY);
            context.rotate(angle);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(-size, -size * 0.4);
            context.lineTo(-size, size * 0.4);
            context.closePath();
            context.fill();
            context.restore();
        }

        // --- Drawing Sequence ---

        // 1. Draw Principal Axis
        ctx.beginPath();
        ctx.moveTo(40, centerY);
        ctx.lineTo(canvas.width - 40, centerY);
        ctx.stroke();

        // 2. Draw Lenses
        // Lens L1
        ctx.beginPath();
        ctx.moveTo(x1, lensTop);
        ctx.lineTo(x1, lensBottom);
        ctx.stroke();
        // Lens L2
        ctx.beginPath();
        ctx.moveTo(x2, lensTop);
        ctx.lineTo(x2, lensBottom);
        ctx.stroke();

        // 3. Draw Lens Labels (using Unicode subscripts for accuracy)
        ctx.font = '26px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('L₁', x1, lensTop - 8);
        ctx.fillText('L₂', x2, lensTop - 8);

        // 4. Draw Dimensioning Elements
        // Vertical extension lines from the axis to the dimension line
        ctx.beginPath();
        ctx.moveTo(x1, centerY);
        ctx.lineTo(x1, dimLineY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x2, centerY);
        ctx.lineTo(x2, dimLineY);
        ctx.stroke();

        // Horizontal dimension line (drawn with a gap in the middle for the label)
        const labelText = "f/2";
        ctx.font = 'italic 24px "Times New Roman"';
        const textMetrics = ctx.measureText(labelText);
        const labelWidth = textMetrics.width;
        const gap = 10;
        const lineCenter = (x1 + x2) / 2;
        const line1End = lineCenter - labelWidth / 2 - gap / 2;
        const line2Start = lineCenter + labelWidth / 2 + gap / 2;

        ctx.beginPath();
        ctx.moveTo(x1, dimLineY);
        ctx.lineTo(line1End, dimLineY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(line2Start, dimLineY);
        ctx.lineTo(x2, dimLineY);
        ctx.stroke();
        
        // Dimension label text in the gap
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(labelText, lineCenter, dimLineY);

        // Arrowheads pointing to the extension lines
        drawArrow(ctx, x1 + 15, dimLineY, x1, dimLineY, arrowheadSize);
        drawArrow(ctx, x2 - 15, dimLineY, x2, dimLineY, arrowheadSize);

        // 5. Draw Figure Caption
        ctx.font = 'bold 22px "Times New Roman"';
        ctx.textBaseline = 'bottom';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.32', centerX, captionY);

    </script>
</body>
</html>